﻿<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="shortcut icon" href="./images/favicon.ico" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hedgehogcat 学习站</title>

    <!-- CSS 存放位置 -->
    <!-- 使用预加载来加速关键资源的加载 -->
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
        as="style" onload="this.rel='stylesheet'">
    <!-- 加载本地CSS文件 -->
    <link rel="stylesheet" href="./css/index.css">
    <link rel="preload" href="./css/audio.css" as="style" onload="this.rel='stylesheet'">

    <noscript>
        <!-- 加载 Font Awesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    </noscript>
</head>

<body>
    <div class="bigBox">
        <div id="detail">
            <button><i class="fas fa-comment-dots" title="评论详情（M）"></i></button>
        </div>
        <div class="lyricsList">
            <div class="title">
                <p>
                    <span class="song-lyrics"></span>
                    <span class="artist"></span>
                </p>
            </div>

            <div class="nav">
                <div class="text">

                </div>
            </div>
        </div>
        <div class="message">
            <button id="postCommentButton">
                发布评论
            </button>

            <div class="comment-form" id="commentForm">
                <h2>...</h2>
                <input id="songId" type="text" placeholder="歌曲id..." readonly></input>
                <input id="commentName" type="text" placeholder="您的姓名..." required></input>
                <textarea placeholder="说点什么吧..." required></textarea>
                <button id="push">发布</button>
                <button class="close-button">&times;</button>
            </div>

        </div>
        <div class="listTop">
            <form id="searchForm">
                <div class="search-container">
                    <input type="text" id="searchInput" name="query" placeholder="在这里输入你喜欢的音乐..." />
                    <button type="submit" class="search-icon" aria-label="搜索"><i class="fas fa-search"></i></button>
                    <!-- 使用 FontAwesome 的搜索图标 -->
                </div>
            </form>
        </div>
        <div class="playList" id="floatingDiv">
            <div class="content">
                <ul>

                </ul>
                <!-- 返回顶部按钮，现在放在 .content 的最后 -->
                <a href="#top" id="backToTop" class="back-to-top-link"><i class="fas fa-crosshairs"></i></a>
            </div>
            <div class="foot">
                <h1>hedgehogcat 学习站</h1>
                <div class="footer-content">
                    <p class="footer-info">备案地址：福建省泉州市</p>
                    <p class="footer-info">ICP备案号：<span class="icp-number">闽ICP备2022008327号-2</span></p>
                    <p class="footer-info">
                        <a href="https://beian.miit.gov.cn/" title="工信部" target="_blank" rel="noopener noreferrer"
                            class="footer-link">工信部备案查询</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="player-container">
                <div class="controls">
                    <button class="prev-button"><i class="fas fa-backward" title="上一首（K）"></i></button>
                    <button class="play-button"><i class="fas fa-play" title="播放（P）"></i></button>
                    <button class="next-button"><i class="fas fa-forward" title="下一首（J）"></i></button>
                    <div class="time-display">
                        <span id="current-time">00:00</span>
                        <div class="progress-bar">
                            <div id="progress"></div>
                        </div>
                        <span id="duration">00:00</span>
                    </div>
                    <button class="volume-button" id="volumeButton">
                        <i class="fas fa-volume-up" title="静音（I）"></i>
                    </button>
                    <button class="icon-button play-mode-button" id="playModeButton">
                        <i class="fas fa-redo" id="playModeIcon" title="顺序播放（L）"></i>
                    </button>
                    <button class="icon-button settings-button" id="settingsButton">
                        <i class="fas fa-list" id="settingsIcon" title="歌词界面（H）"></i>
                    </button>
                </div>

                <div class="volume-control" id="volumeControl" style="display: none;">
                    <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1">
                    <label for="volumeSlider"><i class="fas fa-volume-up" id="volumeIcon"></i></label>
                </div>
            </div>
            <audio id="audio" preload="metadata" controls controlsList="nodownload" style="display:none;">
                <source type="audio/mpeg">
                您的浏览器不支持 audio 元素。
            </audio>
        </div>
    </div>

    <!-- JS 文件放在 body 底部 -->
    <!-- 加载动画，先加载并执行 -->
    <script src="./js/load.js"></script>
    <script src="./js/axios.min.js" defer></script>

    <!-- 其他脚本，使用 defer 属性 -->
    <script src="./js/audio.js" defer></script>
    <script src="./js/play.js" defer></script>
</body>

</html>